<template>
  <div class="_wz_cent_main _wz_Exam">
    <div class="_wz_curriculum">
      <div class="_wz_curriculum_left">
        <div class="_wz_deptPuery">
          <Form inline @keydown.native.enter.prevent="">
            <FormItem>
              <i-input type="text" v-model="formDataSearch.planName" placeholder="考试名称" style="width: 162px;;min-width: 162px;" clearable />
            </FormItem>
            <FormItem>
              <Button type="primary" @click="searchSubmit">搜索</Button>
              <Button type="primary" @click="advancedSearch">高级搜索</Button>
            </FormItem>
          </Form>
        </div>
        <div class="_wz_ztList">
          <div style="width: 100%;height: 100%;display: flex; align-items: center;color: #515a6e;font-size: 12px;" v-if="data0.length < 1">
            <div style="margin:auto;">暂无数据</div>
          </div>
          <div v-else v-for="item in data0" class="_wz_ztList_data" @click="dataSelect(item)" :class="{_wz_select : active.id == item.id}">
            <div style="border-bottom: 1px solid #EDEEEF;padding: 0 0 8px 0;">
              <div style="float: left;width: 200px;">
                <div style="font-size: 14px;font-weight: 600;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
                  {{item.examPlanName}}
                </div>
                <span style="font-size: 12px;color: #ABABAB;">{{!!item.examPlanBeginDate ? item.examPlanBeginDate : '--'}}</span>
                -
                <span style="font-size: 12px;color: #ABABAB;">{{!!item.examPlanEndDate ? item.examPlanEndDate : '--'}}</span>
              </div>
              <div style="float: left;width: calc(100% - 200px);">
                <span v-if="item.examPlanFinish == 0" class="_wz_stateCourse" style="background: #f90;">未开始</span>
                <span v-else-if="item.examPlanFinish == 1" class="_wz_stateCourse" style="background: #19be6b;">已完成</span>
                <span v-else class="_wz_stateCourse" style="background: #57a3f3;">进行中</span>
              </div>
              <h6 style="clear: both;"></h6>
            </div>

            <div style="font-size: 14px;font-weight: 500;line-height: 30px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
              {{item.deptName}}
            </div>
            <div style="line-height: 30px;">
              <span>
                <span style="color: #ABABAB;">考试方向：</span>{{item.examPlanDirectionName}}
              </span>
              <span>
                <span style="color: #ABABAB;">及格分数：</span>{{item.examPlanPassScore}}分
              </span>
            </div>
            <div style="line-height: 30px;">
              <span>
                <span style="color: #ABABAB;">考题总分：</span>{{item.examPlanTotalScore}}分
              </span>
              <span>
                <span style="color: #ABABAB;">考题数量：</span>{{item.examPlanAmount}}题
              </span>
            </div>
            <div style="line-height: 30px;">
              <span>
                <span style="color: #ABABAB;">考试进度：</span>{{item.examPlanFinishNumber}}/{{item.examPlanNumber}}
              </span>
              <span style="margin: 0 0 0 9px;">
                <span style="color: #ABABAB;">完成率：</span>{{ ((item.examPlanFinishNumber / item.examPlanNumber) * 100).toFixed(2) }}%
              </span>
            </div>
          </div>
        </div>
        <Page :total="tableTotal" size="small" :current="page" @on-change="changePage" :styles="pageStyle" />
      </div>
      <div class="_wz_curriculum_right">
        <Card dis-hover :bordered="true" style="margin:0 0 10px;" class="_wz_ztList_cont">
          <p slot="title">考试信息</p>
          <div class="_wz_ztList_cont_span">
            试卷名称：<span>{{!!active ? active.materialExamName : '--'}}</span>
            <Divider type="vertical" />
            考试方向：<span>{{!!active ? active.examPlanDirectionName : '--'}}</span>
            <Divider type="vertical" />
            试卷类型：<span>{{!!active ? active.materialExamTransportTypeName : '--'}}</span>
            <Divider type="vertical" />
            参加人数：<span>{{!!active ? active.examPlanFinishNumber : '--'}}/{{!!active ? active.examPlanNumber + '人' : '--'}}</span>
            <Divider type="vertical" />
            考题数量：<span>{{!!active ? active.examPlanAmount + '题' : '--'}}</span>
            <Divider type="vertical" />
            考题总分<span>：{{!!active ? active.examPlanTotalScore + '分' : '--'}}</span>
            <Divider type="vertical" />
            及格分数：<span>{{!!active ? active.examPlanPassScore + '分' : '--'}}</span>
            <Divider type="vertical" />
            考试时间：
            <span style="margin:0 5px 0 0;">{{!!active ? active.examPlanBeginDate : '--'}}</span>
            -
            <span style="margin:0 0 0 5px;">{{!!active ? active.examPlanEndDate : '--'}}</span>
          </div>
        </Card>

        <Card dis-hover :bordered="true" v-if="!!active">
          <p slot="title">人员列表</p>
          <div slot="extra">
            <Form :model="userSearch" label-position="right" :label-width="0" inline>
              <FormItem>
                <i-select v-model="userSearch.driverType" filterable placeholder="请选择从业类型" clearable>
                  <Option v-for="item in personType" :value="item.code" :key="item.code">{{ item.value }}</Option>
                </i-select>
              </FormItem>
              <FormItem>
                <i-select v-model="userSearch.finishState" filterable placeholder="请选择完成状态" clearable>
                  <Option value="0">未开始</Option>
                  <Option value="1">及格</Option>
                  <Option value="2">不及格</Option>
                </i-select>
              </FormItem>
              <Button type="primary" @click="userSearchFun">搜索</Button>
              <Button type="success" @click="ExpoStud">导出</Button>
              <Button type="success" @click="PrintstudStudy">打印</Button>
            </Form>
          </div>
          <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
        </Card>

        <!--右侧单独加载-->
        <Spin size="large" fix v-if="spinRightShow"></Spin>
      </div>
    </div>
    <Drawer :title="headline" :closable="true" v-model="modal" width="800" :draggable="true">
      <grade v-if="modal" :selectData="examDetails"></grade>
    </Drawer>

    <Modal v-model="advanced" title="高级搜索" :mask="false" :footer-hide="true" :styles="{top: '66px',right:'10px',position:'absolute',width:'calc(100% - 360px - 240px - 20px)'}" @on-cancel="advanced =false">
      <Form inline :label-width="80">
        <FormItem label="考试名称">
          <i-input type="text" v-model="formDataSearch.planName" placeholder="考试名称" clearable />
        </FormItem>
        <FormItem label="选择年份">
          <DatePicker type="year" @on-change="formDataSearch.createYear = $event" v-model="formDataSearch.createYear" placeholder="选择年份"></DatePicker>
        </FormItem>
        <FormItem label="选择月份">
          <i-select v-model="formDataSearch.createMonth" filterable placeholder="选择月份" clearable>
            <Option v-for="item in monthData" :value="item.val" :key="item.val">{{ item.name }}</Option>
          </i-select>
        </FormItem>
        <FormItem label="完成状态">
          <i-select v-model="formDataSearch.finishState" filterable placeholder="完成状态" clearable>
            <Option value="0">未开始</Option>
            <Option value="2">进行中</Option>
            <Option value="1">已完成</Option>
          </i-select>
        </FormItem>
        <FormItem label="运输企业">
          <i-select v-model="formDataSearch.deptUuid" filterable placeholder="请选择运输企业" clearable>
            <Option v-for="item in subDeptList" :value="item.uuid" :key="item.uuid">{{ item.deptName }}</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Modal>
    <Spin size="large" fix v-if="spinShow"></Spin>

    <Drawer v-model="modalPrint" :title="headline" :draggable="true" width="800">
      <printExam v-if="modalPrint" :materialData="materialData" :active="active"></printExam>
    </Drawer>

  </div>
</template>
<script>
  import grade from './grade.vue'
  import wzTbale from "../../../components/table/table";

  import printExam from './printExam.vue'
  export default {
    components: {
      grade,//试题
      wzTbale,//列表
      printExam,
    },
    data() {
      return {
        modalPrint:false,
        personType: [],//从业类型
        userSearch:{},
        spinRightShow: false,//右侧单独加载
        spinShow:false,//本页加载
        subDeptList: [],//运输企业
        examDetails: null,

        formDataSearch: {},
        searchCriteria: {},//点击搜索 从新赋值

        headline: "",//弹框标题
        modal: false,//弹出层状态
        materialData: null,//选择素材的所有数据
        materialType: 0,//6 试题   5 html   1 视频   7 打印情况
        active: null,
        pageStyle: {
          textAlign: "center"
        },
        data0: [],
        advanced: false,//高级搜索
        tableData: {
          url: this.apiUrl.webApi + "/educate/examPlan/examStudentPlanPageList",//请求地址
          method: 'post',//请求方式
          where: {},//搜索条件
          height: 'auto',//表格高度 auto
          page: true,//分页是否使用
          columns: [//表头数据
            {type: 'index', width: 70, align: 'center', title: '序号'},
            {title: '从业人员', key: 'driverName', minWidth: 100},
            {title: '从业类型', key: 'driverTypeName', minWidth: 100},
            {title: '驾乘车辆', key: 'driverVehicleNo', minWidth: 100},
            {title: '身份证号', key: 'driverIdentifyNum', minWidth: 160},
            {title: '联系电话', key: 'driverPhone', minWidth: 120},

            {
              title: '考试次数', key: 'examStudentScore', minWidth: 120, render: (h, params) => {
                return h('div', params.row.examStudentCount + "次");
              }
            },
            {
              title: '考试得分', key: 'examStudentScore', minWidth: 100, render: (h, params) => {
                return h('div', params.row.examStudentScore + "分");
              }
            },
            // {
            //   title: '及格分数', key: 'examStudentPassScore', minWidth: 120, render: (h, params) => {
            //     return h('div', params.row.examStudentPassScore + "分");
            //   }
            // },
            // {
            //   title: '考题总分', key: 'examStudentTotalScore', minWidth: 120, render: (h, params) => {
            //     return h('div', params.row.examStudentTotalScore + "分");
            //   }
            // },
            {
              title: '考试用时', key: 'examStudentUseDuration', minWidth: 100, render: (h, params) => {
                return h('div', parseInt(params.row.examStudentUseDuration / 60) +' 分钟 '+ params.row.examStudentUseDuration % 60 +' 秒');
              }
            },
            {
              title: '考试情况', fixed: 'right', minWidth: 140, render: (h, params) => {
                return h('Tag', {
                  props: {
                    type: 'dot',
                    color: (params.row.examStudentPass == 0) ? "" : (params.row.examStudentPass == 1) ? "success" : "warning"
                  }
                }, (params.row.examStudentPass == 0) ? "未开始" : (params.row.examStudentPass == 1) ? "考试及格" : "不及格");
              }
            },
            {
              title: '操作', fixed: 'right', width: 80, render: (h, params) => {
                var test = h('span', "");
                if (!!params.row.examStudentScore) {
                  test = h('span', {
                    style: {"color": "#2d8cf0", "cursor": "pointer"},
                    on: {
                      click: () => {
                        this.Achievement(params.row)
                      }
                    }
                  }, "查看")
                }
                return test;
              }
            },
          ],
          format: {//返回数据格式
            list: ['data'],//数据list
            count: ['count'],//数据总量
          },
        },

        monthData: [
          {"name": "一月份", "val": "1"},
          {"name": "二月份", "val": "2"},
          {"name": "三月份", "val": "3"},
          {"name": "四月份", "val": "4"},
          {"name": "五月份", "val": "5"},
          {"name": "六月份", "val": "6"},
          {"name": "七月份", "val": "7"},
          {"name": "八月份", "val": "8"},
          {"name": "九月份", "val": "9"},
          {"name": "十月份", "val": "10"},
          {"name": "十一月份", "val": "11"},
          {"name": "十二月份", "val": "12"},
        ],//月份数据
        page: 1,//当前页码
        limit: 10,//当前页码
        tableTotal: 0,//总条数

      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      let that = this;
      //运输企业
      that.axios.post(that.apiUrl.coreDeptCoreDeptList,{}).then(res => {
        if (!!res) {
          that.subDeptList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })


      //加载从业类型字典
      that.axios.post(that.apiUrl.systemDictSystemDictList, {type: 'person_type'}).then(res => {
        if (!!res) {
          that.personType = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

      that.tableLoadData()


    },
    methods: {//执行的方法
      userSearchFun(){
        var that = this;
        var data = JSON.parse(JSON.stringify(that.userSearch))
        data.examPlanUuid = that.active.uuid
        that.tableData.where = data;
        that.$refs.wzTbale.tableLoadData(true);
      },
      tableLoadData() {
        let that = this;
        let searchCriteria = that.searchCriteria;//获取表单数据  和分页 条数
        searchCriteria.page = that.page;
        searchCriteria.limit = that.limit;
        searchCriteria.releaseState = 1;

        that.spinShow = true;
        that.axios.post(that.apiUrl.webApi + "/educate/examPlan/examPlanPageList", searchCriteria).then(res => {
          that.spinShow = false;
          if (!!res) {
            if (res.data.data.length > 0) {
              that.active = res.data.data[0];
              that.data0 = res.data.data;//返回数据
              that.tableTotal = res.data.count;
              that.studentList(res.data.data[0]);
            } else {

              that.active = null;
              that.data0 = [];//返回数据
              that.tableTotal = 0;

              // //人员
              that.tableData.where = {};
              that.$refs.wzTbale.tableLoadData(true);
            }
          }
        }).catch(err => {
          console.log('失败', err);
        })
      },
      //加载右侧人员列表
      studentList(data) {
        let that = this;
        that.tableData.where = JSON.parse(JSON.stringify({examPlanUuid: that.active.uuid}));
        that.$nextTick(function () {
          that.$refs.wzTbale.tableLoadData(true);
        })
      },
      changePage(page) {//返回第几页
        this.page = page;//设置当前页数
        this.tableLoadData();
      },
      dataSelect(data) {
        this.active = data;
        this.studentList(data);
      },
      advancedSearch() {//高级搜索
        let that = this;
        that.advanced = true;
      },
      //个人成绩
      Achievement(data) {
        let that = this;
        that.headline = data.driverName + "考试成绩";
        that.$Spin.show()
        that.axios.post(that.apiUrl.webApi + "/educate/examPlan/examStudentPlanInfo", {uuid: data.uuid}).then(res => {
          that.$Spin.hide()
          if (!!res) {
            //考试
            var imgList = [];
            !!res.data.data.examStudentFirstImg ? imgList.push(res.data.data.examStudentFirstImg) : "";
            !!res.data.data.examStudentSecondImg ? imgList.push(res.data.data.examStudentSecondImg) : "";
            !!res.data.data.examStudentThirdImg ? imgList.push(res.data.data.examStudentThirdImg) : "";
            res.data.data.imgList = imgList;
            that.examDetails = res.data.data;
            that.modal = true;
          }
        }).catch(err => {
          console.log('失败', err);
        })

      },
      //搜索
      searchSubmit() {
        this.page = 1;//设置当前页数
        this.searchCriteria = JSON.parse(JSON.stringify(this.formDataSearch));
        this.tableLoadData();
      },
      //导出
      ExpoStud() {
        let that = this;
        if (!!that.active) {
          that.spinShow = true;
          var data = {examPlanUuid : that.active.uuid};
          that.axios.post(that.apiUrl.webApi + "/educate/examPlan/examStudentPlanExport", data).then(res => {
            that.spinShow = false;
            if (!!res) {
              window.open(that.apiUrl.imgUrl + res.data.data)
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.$Message.warning("请选择要导出的课程");
        }
      },
      //打印所有学员情况
      PrintstudStudy() {
        let that = this;
        if (!!that.active) {
          var data = JSON.parse(JSON.stringify(that.userSearch))
          data.examPlanUuid = that.active.uuid
          that.spinShow = true;
          that.axios.post(that.apiUrl.webApi + "/educate/examPlan/examStudentPlanPrint", data).then(res => {
            that.spinShow = false;
            if (!!res) {
              that.headline = that.active.examPlanName + "考试情况"
              that.materialData = res.data.data;
              that.modalPrint = true;
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.$Message.warning("请选择要打印的课程");
        }
      },
    },
    watch: {//监听

    },
    props: {//接收来自父组件的数据

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_Exam {
    ._wz_curriculum {
      height: 100%;

      ._wz_curriculum_left {
        float: left;
        height: 100%;
        width: 350px;
        box-sizing: border-box;
        background: #fff;
        overflow: auto;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        color: #666;
        padding: 10px;
        border: 1px solid #e8eaec;

        ._wz_deptPuery {
          font-size: 12px;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 40px;
          cursor: pointer;
          color: #666;
          box-sizing: border-box;
          margin: 10px 0;
        }

        ._wz_ztList {
          height: calc(100% - 57px - 40px - 20px);
          font-size: 12px;
          width: 100%;
          overflow: auto;
          text-overflow: ellipsis;
          white-space: nowrap;
          cursor: pointer;
          color: #666;
          padding: 0 10px;
          box-sizing: border-box;

          ._wz_ztList_data {
            border: 2px solid #EDEEEF;
            border-radius: 4px;
            padding: 8px;
            margin-bottom: 10px;
            letter-spacing: 1px;

            ._wz_stateCourse {
              color: #fff;
              border-radius: 30px;
              display: block;
              margin: 7px auto;
              padding: 0 6px;
              width: 50px;
              height: 26px;
              line-height: 26px;
            }

          }

          ._wz_ztList_data:hover {
            border-color: #EFB987;
          }

          ._wz_select {
            background: #FEF7EA;
            border-color: #EFB987;
          }
        }

      }

      ._wz_curriculum_right {
        height: 100%;
        width: calc(100% - 360px);
        float: left;
        margin: 0 0 0 10px;
        box-sizing: border-box;
        overflow: auto;
        position: relative;
        /*display: flex;*/
        /*flex-direction: column;*/

        /*.ivu-card-body {*/
        /*  height: calc(100% - 51px);*/
        /*}*/

        ._wz_ztList_cont {
          ._wz_ztList_cont_span {
            line-height: 30px;
            color: #ababab;

            span {
              margin: 0 10px 0 0;
              color: #01AAED;
              word-break: break-all;
            }
          }
        }
      }
    }

    .vertical-center-modal {
      display: flex;
      align-items: center;
      justify-content: center;

      .ivu-modal {
        top: 0;
      }
    }
  }

</style>
